<div class="accessory-box" [ngClass]="{ 'accessory-on': service.values.ContactSensorState }">
  <div class="d-flex flex-column h-100">
    <div [attr.aria-label]="'accessories.core.contact_sensor' | translate" class="accessory-svg">
      <svg width="32px" height="32px" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
        <!-- left object -->
        <rect
          class="left-object"
          x="1"
          y="1"
          width="15"
          height="30"
          rx="1"
          stroke="#7f7f7f"
          fill="none"
          stroke-width="1.5"
        />
        <!-- right object -->
        <rect
          class="right-object"
          x="16"
          y="1"
          width="15"
          height="30"
          rx="1"
          stroke="#7f7f7f"
          fill="none"
          stroke-width="1.5"
        />
        <!-- left sensor -->
        <rect
          class="left-sensor"
          x="10"
          y="11"
          width="6"
          height="10"
          rx="1"
          stroke="#7f7f7f"
          fill="#4caf50"
          fill-opacity="0.5"
          stroke-width="0.5"
        />
        <!-- right sensor -->
        <rect
          class="right-sensor"
          x="16"
          y="11"
          width="6"
          height="10"
          rx="1"
          stroke="#7f7f7f"
          fill="#4caf50"
          fill-opacity="0.5"
          stroke-width="0.5"
        />
      </svg>
    </div>
    <div class="accessory-label mt-auto">{{ service.customName || service.serviceName }}</div>
    @if (service.values.ContactSensorState) {
    <div class="accessory-label red-text">{{ 'accessories.control.open' | translate }}</div>
    } @else {
    <div class="accessory-label grey-text">{{ 'accessories.control.closed' | translate }}</div>
    }
  </div>
</div>
